<template>
  <el-container>
    <el-aside>
      <el-menu id="menu-list" :default-active="$route.name" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" @select="select">
        <menutree :menuData="menu"></menutree>
      </el-menu>
    </el-aside>

    <el-container class="right_content">
      <el-header class="bd">
        Header{{ $store.state.msg }}
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane v-for="item in tabList" :label="item.name" :name="item.index" :key="item.index"></el-tab-pane>
        </el-tabs>
      </el-header>
      <el-main>
        <keep-alive :include="keepList">
          <router-view></router-view>
        </keep-alive>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import menutree from "./components/menu_tree";
import menu from "@/router/menu";
export default {
  components: {
    menutree,
  },
  data() {
    return {
      menu,
      tabList: [],
      keepList: [],
      activeName: "",
      selectedMenu: {},
    };
  },
  mounted() {},
  methods: {
    // 递归查询
    aginMenu(data, url) {
      for (let i = 0; i < data.length; i++) {
        if (data[i].index == url) {
          this.selectedMenu = data[i];
          return;
        }
        if (data[i].children.length > 0) {
          this.aginMenu(data[i].children, url);
        }
      }
    },
    select(index, indexPath) {
      this.activeName = index;
      let i = this.keepList.indexOf(index);
      this.aginMenu(this.menu, index);
      if (i > -1) {
        this.keepList.splice(i, 1);
        this.$nextTick(() => {
          this.keepList.push(index);
        });
      } else {
        if (this.tabList.some((v) => v.index === index)) return;
        this.keepList.push(index);
        this.tabList.push({
          index,
          name: this.selectedMenu.name,
        });
      }
      this.$router.push({ name: index }).catch((err) => {});
    },
    handleClick(tab, event) {
      if (this.keepList.indexOf(tab.name) === -1) this.keepList.push(tab.name);
      this.$router.push({
        name: tab.name,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-container {
  height: 100vh;
  // min-width: 1200px;
  .el-aside {
    width: 200px !important;
  }

  .el-menu {
    border-right: none;
    height: 100%;
    width: 100%;
  }

  .el-header {
    // background: deepskyblue;
  }

  ::v-deep.el-main {
    // padding-right: 0 !important;
    position: relative;
  }
}
</style>
